<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>科室</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <link type="text/css" rel="stylesheet" href="/css/moregood.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>

</head>
<body>
<div id="app">


    <div >
        <el-form :inline="true" :model="officeVo" class="demo-form-inline">

            <el-form-item label="科室名字" prop="tName">
                <el-input v-model="officeVo.tName" placeholder="科室名字"></el-input>
            </el-form-item>
            <el-form-item label="科室状态" prop="tStatus">

                <el-select v-model="officeVo.tStatus" placeholder="请选择科室" style="width: 100%">
                    <el-option value="0">已经裁撤的科室</el-option>
                    <el-option value="1">存在的科室</el-option>
                </el-select>

            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
    </div>


    <el-table
            :data="tableData"
            border
            style="width: 100%"
            :cell-style="styleBack"
            :header-cell-style="getRowClass"

    >
        <el-table-column
                prop="tId"
                label="编号"
                width="70">
        </el-table-column>
        <el-table-column
                prop="tName"
                label="科室名称"
                width="100">
        </el-table-column>


        <el-table-column
                prop="tStatus"
                label="部门状态"
                width="180">
            <template slot-scope="scope">

                <el-tag  v-if="scope.row.tStatus == 1">科室存在</el-tag>
                <el-tag  v-else-if="scope.row.tStatus == 0" style="color: red">科室已被裁撤</el-tag>
                <el-tag size="small" v-else>科室不存在</el-tag>

            </template>
        </el-table-column>


        <el-table-column
                prop="tIntroduce"
                label="科室简介"
                width="260">
        </el-table-column>
        <el-table-column
                prop="tScience"
                label="学术地位"
                width="250">
        </el-table-column>
        <el-table-column
                prop="tSkill"
                label="技术优势"
                width="330">
        </el-table-column>
        <el-table-column
                prop="tInnovote"
                label="成果/创新"
                width="310">
        </el-table-column>
        <el-table-column
                fixed="tInfo"
                label="就诊须知"
                width="330">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="210">
            <template slot-scope="scope">
                <el-button size="small" type="success" @click="editTechnicalOffice(scope.row)">修改</el-button>
                <el-button size="small" type="danger" @click="del(scope.row)" style="position: absolute;left: 58px;">删除</el-button>
                <el-button size="small" type="danger" @click="updatestatus(scope.row)" style="position: absolute;left: 118px;">更改状态</el-button>
            </template>
        </el-table-column>
    </el-table>

    <%--科室修改弹框--%>
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <!--:model:绑定表单数据-->
        <el-form :model="updateForm" label-width="110px">

            <el-form-item label="科室名称" prop="tName">
                <el-input v-model="updateForm.tName" class="tn"></el-input>
            </el-form-item>
            <el-form-item label="科室简介" prop="tIntroduce">
                <el-input v-model="updateForm.tIntroduce" class="ti"></el-input>
            </el-form-item>
            <el-form-item label="学术地位" prop="tScience">
                <el-input v-model="updateForm.tScience" class="ts"></el-input>
            </el-form-item>
            <el-form-item label="技术优势" prop="tSkill">
                <el-input v-model="updateForm.tSkill" class="tl"></el-input>
            </el-form-item>
            <el-form-item label="成果/创新" prop="tInnovote">
                <el-input v-model="updateForm.tInnovote" class="te"></el-input>
            </el-form-item>


        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="technicalOfficeUpdate()">确认修改</el-button>

    </span>
    </el-dialog>

    <%--分页--%>
    <div style="margin-top: 0.2rem; margin-left: 18.2rem;">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5,7,10]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>


</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            tableData: [],
            dialogVisible: false,
            dialogVisible01: false,
            editForm: {},
            updateForm: {},
            officeVo:{},

            //默认分页数据的当前页
            currentPage: 1,
            //默认分页数据的当前页有几条数据
            pageSize: 5,
            total: 0,
        },
        //当html页面加在完毕后执行得函数而且只会被执行一次
        created() {
            this.initTable();
        },
        methods: {

            //查询
            onSubmit(){
              /*  axios.post("/TechnicalOffice/select",this.officeVo).then(resp=>{
                    if(resp.data.code===200){
                        this.$message.success("查询成功");
                        this.tableData = resp.data.data;
                    }
                })*/
                this.initTable();
            },
            //更改状态
            updatestatus(row){
                axios.get("/TechnicalOffice/updateStatus?tId="+row.tId+"&tStatus="+row.tStatus).then(resp=>{
                    if(resp.data.code===200){
                        this.$message.success("更改成功");
                        this.initTable();
                    }
                })
            },

            //删除科室
            del(row) {
                axios.post("TechnicalOffice/delete?tId=" + row.tId).then(resp => {
                    if (resp.data.code) {
                        this.$message.success("删除成功");
                        this.initTable();
                    }
                })
            },
            //确认修改科室
            technicalOfficeUpdate() {
                axios.post("/TechnicalOffice/update", this.updateForm).then(resp => {
                    if (resp.data.code === 200) {
                        this.$message.success("修改科室成功");
                        //关闭表单弹窗
                        this.dialogVisible = false;
                        //重新加载表格数据
                        this.initTable();
                    }
                })
            },
            //点击修改
            editTechnicalOffice(row) {
                this.dialogVisible = true;
                this.updateForm = row;
            },
            initTable() {
                axios.post("/TechnicalOffice/select?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,this.officeVo).then(resp => {
                    console.log(resp)

                    this.tableData = resp.data.data.list;
                    this.total = resp.data.data.total;
                })
            },

            //分页设置每页多少条数据
            handleSizeChange(val) {

                this.pageSize = val;
                this.initTable();

            },

            //当当前页数改变时，查找当前页和当前设置的每页多少条数据
            handleCurrentChange(val) {

                this.currentPage = val
                this.initTable();
            },
            // 表格奇偶层样式
            styleBack({ row, column, rowIndex, columnIndex }) {
                if ((rowIndex + 1) % 2 === 0) {
                    return "background:#053c4a; color:#fff;border:1px solid #053c4a";
                } else {
                    return "background:#042831; color:#fff;border:1px solid #042831";
                }
            },
            // 表头样式
            getRowClass({ rowIndex }) {
                return "background:#053c4a; color:#fff;border:3px solid #053c4a";
            },
        }
    })
</script>
</html>
